<template>
  <view>
    <view class="nav-bar"></view>
    <view class="container">
      <view class="tab-view">
        <view
          @click="tabClick(item, index)"
          :class="current === index ? 'tab-selected' : ''"
          class="tab-item"
          v-for="(item, index) in tabs">
          {{ item }}
        </view>
      </view>
      <view class="card-view">
        <view class="action-btn-view">
          <view class="left">
            <view class="title">{{ detailData.status }}</view>
            <view class="tip" v-if="detailData.status === '待评估'">
              请评估患者状态
            </view>
            <view class="tip" v-if="detailData.status === '待派发'">
              请选择需要派发的护士
            </view>
            <view class="tip" v-if="detailData.status === '待出发'">
              请充分了解患者情况，注意路程安全
            </view>
            <view class="tip" v-if="detailData.status === '待服务'">
              请点击开始服务按钮，并拍摄视频记录
            </view>
            <view class="tip" v-if="detailData.status === '服务中'">
              服务结束后，请点击结束按钮
            </view>
          </view>
          <view
            class="btn"
            @click="navToEvaluate"
            v-if="detailData.status === '待评估'">
            去评估
          </view>
          <view
            class="btn"
            @click="navToChooseNurse"
            v-if="detailData.status === '待派发'">
            去派发
          </view>
          <view
            class="btn"
            @click="navToChooseNurse"
            v-if="detailData.status === '待出发'">
            重新派发
          </view>
          <view
            class="btn"
            @click="confirmRefund"
            v-if="detailData.status === '待退款'">
            确定退款
          </view>
        </view>
      </view>

      <view class="card-view nurse-info" v-if="detailData.dispatchNursesUid">
        <view class="list-item">
          <image :src="detailData.pictureName"></image>
          <div class="right">
            <div class="top">
              <div class="name">{{ detailData.dispatchNurses }}</div>
              <div class="phone">{{ detailData.nursesPhone }}</div>
            </div>
            <div class="bottom">{{ detailData.hospitalName }}</div>
          </div>
        </view>
      </view>

      <view class="tab-container tab-1" v-if="current === 0">
        <view class="card-view">
          <view class="info-row">
            <view class="name">派发服务时间</view>
            <view class="value">{{ detailData.toDoorTime || "" }}</view>
          </view>
          <view class="info-row">
            <view class="name">服务地址</view>
            <view class="value">{{ detailData.visitorAddress || "" }}</view>
            <view class="nav-btn" @click="navigation">导航</view>
          </view>
          <view class="info-row">
            <view class="name">就诊人</view>
            <view class="value">
              {{ detailData.visitor || "" }} {{ detailData.sex || "" }}
              {{ detailData.age || "" }}岁
            </view>
            <view
              style="color: #2eb0d9; margin-left: 15rpx"
              @click="navToAppointmentRecord">
              预约记录
            </view>
          </view>
          <view class="info-row">
            <view class="name">联系人</view>
            <view class="value">{{ detailData.contactName || "" }}</view>
          </view>
          <view class="info-row">
            <view class="name">联系电话</view>
            <view class="value">
              {{ detailData.contactPhone || "" }}
              <call-button :phoneNumber="detailData.contactPhone"></call-button>
            </view>
          </view>
          <view class="info-row">
            <view class="name">预约项目</view>
            <view class="value">{{ serviceItem || "" }}</view>
          </view>
        </view>

        <view class="card-view">
          <view class="card-title">诊断证明</view>
          <view class="card-body">
            <uni-grid :column="3" :showBorder="false" :highlight="false">
              <uni-grid-item v-for="item in diagnosisProofList">
                <view class="grid-item">
                  <image :src="item" @click="imgclick(item)"></image>
                </view>
              </uni-grid-item>
            </uni-grid>
          </view>
        </view>

        <view class="card-view">
          <view class="card-title">情况描述</view>
          <view class="card-body description-text">
            {{ detailData.situationDesc || "" }}
          </view>
        </view>

        <view class="card-view last-card">
          <view class="order-row">
            <view class="name">订单编号</view>
            <view class="value">{{ detailData.orderNum || "" }}</view>
            <view
              class="copy-btn"
              @click="copyOrderNumber(detailData.orderNum)">
              复制
            </view>
          </view>
          <view class="order-row" v-if="detailData.status !== '已下单'">
            <view class="name">订单金额</view>
            <view class="value">{{ detailData.orderAmount || "" }}</view>
          </view>
          <view class="order-row">
            <view class="name">下单时间</view>
            <view class="value">{{ detailData.orderTime || "" }}</view>
          </view>
          <view class="order-row">
            <view class="name">派单时间</view>
            <view class="value">{{ detailData.receiveOrderTime || "" }}</view>
          </view>
          <view class="order-row" v-if="detailData.status === '待退款'">
            <view class="name">退款金额</view>
            <view class="value">{{ detailData.refundAmount || "" }}</view>
          </view>
          <view class="order-row" v-if="detailData.status === '待退款'">
            <view class="name">退款时间</view>
            <view class="value">{{ detailData.refundTime || "" }}</view>
          </view>
          <view class="order-row" v-if="detailData.status === '待退款'">
            <view class="name">退款原因</view>
            <view class="value">{{ detailData.refundFlag || "" }}</view>
          </view>
        </view>
      </view>

      <view class="tab-container tab-2" v-if="current === 1">
        <view class="card-view last-card" v-if="detailData.status === '待评估'">
          <template v-for="(item, index) in questionList">
            <view
              :key="index"
              class="checkbox-view"
              v
              v-if="item.questionType === '单选'">
              <!-- <view class="name">{{item.questionName}}</view>
							<view class="value">
								<picker :range="item.questions" @change="onPickerChange($event,item)">
									<view class="picker-item">
										<view v-if="!item.questionAnswer">请选择</view>
										<view v-else>{{item.questionAnswer}}</view>
										<uni-icons type="right"></uni-icons>
									</view>
								</picker>
							</view> -->

              <view class="top">
                <view class="name">{{ item.questionName }}</view>
                <view class="value">
                  <uni-icons type="right"></uni-icons>
                </view>
              </view>
              <radio-group
                style="padding-top: 10rpx"
                @change="onPickerChange($event, item)">
                <label
                  style="display: block; margin-bottom: 5px"
                  v-for="(item, index) in item.questions"
                  :key="index">
                  <radio :value="item.name" />
                  {{ item }}
                </label>
              </radio-group>
            </view>
            <view
              :key="index"
              class="checkbox-view"
              v-if="item.questionType === '多选'">
              <view class="top">
                <view class="name">{{ item.questionName }}</view>
                <view class="value">
                  <uni-icons type="right"></uni-icons>
                </view>
              </view>
              <checkbox-group
                v-model="item.questionAnswer"
                @change="onCheckBoxChange($event, item)">
                <view class="checkbox-group-view">
                  <view v-for="qitem in item.questions">
                    <checkbox :value="qitem">{{ qitem }}</checkbox>
                  </view>
                </view>
              </checkbox-group>
            </view>
            <view class="evaluate-form-row" v-if="item.questionType === '填空'">
              <view class="name">{{ item.questionName }}</view>
              <view class="value">
                <input
                  placeholder="请填写"
                  placeholder-class="placeholder-class"
                  v-model="item.questionAnswer" />
              </view>
            </view>
          </template>
        </view>

        <view class="card-view last-card" v-else>
          <template v-for="(item, index) in orderAssessInfoList">
            <view class="evaluate-row">
              <view class="name">{{ item.questionName }}</view>
              <view class="value">
                <view class="picker-item">
                  <view>{{ item.questionAnswer }}</view>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>

    <view class="bottom-view status-1" v-if="detailData.status === '待评估'">
      <view class="line-btn" @click="refuse">拒绝</view>
      <view class="submit-btn" v-if="current === 0" @click="navToEvaluate">
        评估
      </view>
      <view
        class="submit-btn"
        v-if="current === 1"
        @click="submitEvaluationQuestion">
        提交
      </view>
    </view>

    <!-- 		<view class="bottom-view status-2" v-if="detailData.status === '待出发'">
			<view class="submit-btn" @click="navToChooseNurse">派发</view>
		</view> -->

    <view class="bottom-view status-3" v-if="false">
      <view class="line-btn">新增耗材</view>
      <view class="line-btn">耗材退款</view>
      <view class="submit-btn">出发</view>
    </view>

    <view class="bottom-view status-4" v-if="false">
      <view class="submit-btn">去总结</view>
    </view>

    <view class="bottom-view status-5" v-if="false">
      <view class="line-btn">查看总结</view>
    </view>

    <uni-popup ref="refusePopup" type="dialog">
      <uni-popup-dialog
        :is-mask-click="false"
        mode="base"
        :duration="2000"
        :before-close="true"
        @confirm="onRefusePopupConfirm"
        @close="onRefusePopupClose">
        <textarea
          v-model="rejectionReason"
          placeholder="请填写拒绝原因"></textarea>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import * as orderInfo from "../../common/api/orderInfo.js";
import * as orderAssessInfo from "../../common/api/orderAssessInfo.js";
import * as evaluationQuestion from "../../common/api/evaluationQuestion.js";
export default {
  data() {
    return {
      tabs: ["预约信息", "护理评估"],
      current: 0,
      uid: "",
      detailData: {},
      serviceItem: "",
      diagnosisProofList: [],
      orderAssessInfoList: [],
      questionList: [],
      form: {
        uid: "",
        orderUid: "",
        orderNum: "",
        assessInfos: [],
      },
      rejectionReason: "", //拒绝原因
    };
  },
  onLoad(opt) {
    console.log("订单详情", opt);
    if (opt) {
      this.uid = opt.uid;
    }
  },
  onShow() {
    this.current = 0;
    this.getData();
  },
  methods: {
    tabClick(item, index) {
      this.current = index;
      this.initEvaluationQuestion();
    },
    getData() {
      const param = {
        uid: this.uid,
      };
      orderInfo
        .queryById(param)
        .then((result) => {
          this.detailData = result.data.data;
          this.setServiceItem();
          this.setDiagnosisProofList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    imgclick(val) {
      uni.previewImage({
        urls: [val],
      });
    },
    setServiceItem() {
      const list = this.detailData.itemInfos || [];
      this.serviceItem = list.map((e) => e.serviceItem).join("|");
    },
    setDiagnosisProofList() {
      const diagnosisProof = this.detailData.diagnosisProof || "";
      if (diagnosisProof) {
        this.diagnosisProofList = diagnosisProof.split("|");
      }
    },
    navigation() {
      uni.openLocation({
        latitude: parseFloat(this.detailData.latitude),
        longitude: parseFloat(this.detailData.longitude),
        name: this.detailData.visitorAddress,
        address: this.detailData.visitorAddress,
        success: (res) => {
          console.log("打开系统位置地图成功");
        },
        fail: (error) => {
          console.log(error);
        },
      });
    },
    refuse() {
      uni.showModal({
        title: "提示",
        content: "确认拒绝？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.showRefusePopup();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    showRefusePopup() {
      this.$refs.refusePopup.open();
    },
    onRefusePopupConfirm() {
      if (!this.rejectionReason) {
        uni.showToast({
          title: "请填写拒绝原因",
          icon: "error",
        });
        return;
      }
      const param = {
        uid: this.uid,
        rejectionReason: this.rejectionReason,
        status: "已拒绝",
      };
      orderInfo
        .update(param)
        .then((result) => {
          this.getData();
          this.$refs.refusePopup.close();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onRefusePopupClose() {
      this.$refs.refusePopup.close();
    },
    evaluate() {
      this.current = 1;
    },
    evaluateSubmit() {
      this.navToChooseNurse();
    },
    navToChooseNurse() {
      uni.navigateTo({
        url:
          "/pages/chooseNurse/chooseNurse?uid=" +
          this.uid +
          "&orderNum=" +
          this.detailData.orderNum,
      });
    },
    confirmRefund() {
      const param = {
        orderRefurdAmout: this.detailData.refundAmount, //退款金额
        orderCancel: this.detailData.refundFlag, //退款原因
        orderId: this.detailData.orderNum, //退款订单
        orderRefundMode: "原路返回", //退款方式
      };
      console.log("确定退款", param);
      orderInfo
        .refund(param)
        .then((result) => {
          console.log(result);
          uni.navigateTo({
            url: "/pages/doctorOrder/doctorOrder",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    start() {
      uni.showModal({
        title: "提示",
        content: "确认出发？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              setOutTime: new Date().format("yyyy-MM-dd HH:mm:ss"),
              paymentStatus: "待服务",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    startService() {
      uni.showModal({
        title: "提示",
        content: "开始服务？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              setOutTime: new Date().format("yyyy-MM-dd HH:mm:ss"),
              paymentStatus: "待结束",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    getOrderAssessInfo() {
      const param = {
        orderUid: this.uid,
      };
      orderAssessInfo
        .queryByPage(param)
        .then((result) => {
          this.orderAssessInfoList = result.data.data.rows;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToEvaluate() {
      // uni.navigateTo({
      // 	url:'/pages/evaluate/evaluate?uid='+this.uid
      // })
      this.current = 1;
      this.initEvaluationQuestion();
    },
    initEvaluationQuestion() {
      if (this.detailData.status === "待评估") {
        this.initEvaluationQuestionForm();
      } else {
        this.getOrderAssessInfo();
      }
    },
    initEvaluationQuestionForm() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        hospitalUid: data.hospitalUid,
      };
      evaluationQuestion
        .queryByPage(param)
        .then((result) => {
          this.questionList = result.data.data.rows;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    copyOrderNumber(orderNum) {
      uni.setClipboardData({
        data: orderNum,
        success: () => {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
        },
        fail: () => {
          uni.showToast({
            title: "复制失败",
            icon: "none",
          });
        },
      });
    },
    onCheckBoxChange(e, item) {
      this.$set(item, "questionAnswer", e.detail.value);
    },
    onPickerChange(e, item) {
      const list = item.questions || [];
      const index = e.detail.value || 0;
      this.$set(item, "questionAnswer", list[index]);
    },
    initForm() {
      this.form.orderUid = this.detailData.uid;
      this.form.orderNum = this.detailData.orderNum;
      this.form.assessInfos = [];
      const list = this.questionList || [];
      list.forEach((e) => {
        let questionAnswer = e.questionAnswer;
        if (e.questionType === "多选") {
          if (questionAnswer) {
            questionAnswer = questionAnswer.join(",");
          }
        }
        this.form.assessInfos.push({
          questionName: e.questionName,
          questionType: e.questionType,
          questionAnswer: questionAnswer,
        });
      });
    },
    checkForm() {
      const list = this.form.assessInfos;
      for (const item of list) {
        if (!item.questionAnswer) {
          uni.showToast({
            title: item.questionName + "不能为空",
            icon: "none",
          });
          return false;
        }
      }
      return true;
    },
    submitEvaluationQuestion() {
      this.initForm();
      console.log(JSON.stringify(this.form));
      if (!this.checkForm()) {
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确认提交？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.submitEvaluationQuestionForm();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    submitEvaluationQuestionForm() {
      const param = Object.assign({}, this.form);
      orderAssessInfo
        .insertBatch(param)
        .then((result) => {
          uni.showToast({
            title: result.data.msg,
            icon: "none",
          });
          this.getData();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToAppointmentRecord() {
      uni.navigateTo({
        url:
          "/pages/appointmentRecord/appointmentRecord?visitorIdNum=" +
          this.detailData.visitorIdNum,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 910rpx;
  background: linear-gradient(to bottom, #2eb0d9, #71c8e3, #f9f9f9);
}

.container {
  margin-top: -880rpx;
  display: flex;
  flex-direction: column;
}

.tab-view {
  width: 100%;
  display: flex;
  justify-content: space-around;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 34rpx;
  }

  .tab-selected {
    color: white;
  }

  .tab-selected::after {
    content: "";
    width: 40rpx;
    height: 6rpx;
    border-radius: 3rpx;
    background: white;
    margin-top: 26rpx;
  }
}

.card-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;

  .card-title {
    color: #232323;
    font-size: 30rpx;
    font-weight: bold;
  }

  .card-body {
    margin-top: 26rpx;
  }
}

.tab-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.action-btn-view {
  display: flex;
  align-items: center;

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 40rpx;
      color: #232323;
      font-weight: bold;
    }

    .tip {
      color: rgba(35, 35, 35, 0.5);
      font-size: 26rpx;
      margin-top: 14rpx;
    }
  }

  .btn {
    width: 180rpx;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #2eb0d9;
    font-size: 28rpx;
  }
}

.info-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;

  .name {
    width: 190rpx;
    color: #232323;
    font-weight: bold;
    font-size: 30rpx;
  }

  .value {
    color: #232323;
    font-size: 30rpx;
    display: flex;
    align-items: center;
  }

  .nav-btn {
    width: 96rpx;
    height: 48rpx;
    border: solid 2rpx #2eb0d9;
    border-radius: 24rpx;
    color: #2eb0d9;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.grid-item {
  width: 100%;
  height: 100%;
  border: solid 2rpx #f6f6f6;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rpx;
  box-sizing: border-box;

  image {
    width: 100%;
    height: 100%;
  }
}

.description-text {
  color: rgba(35, 35, 35, 0.8);
  font-size: 30rpx;
}

.last-card {
  margin-bottom: 120rpx;
}

.order-row {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
  }

  .copy-btn {
    color: #2eb0d9;
    margin-left: 8rpx;
    font-size: 26rpx;
  }
}

.bottom-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  display: flex;
  padding: 14rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.status-1 {
  .line-btn {
    width: 250rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }

  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 420rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-2 {
  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-3 {
  .line-btn {
    width: 180rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }

  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 290rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-4 {
  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.status-5 {
  justify-content: flex-end;

  .line-btn {
    width: 180rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }
}

.evaluate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
  }

  .picker-item {
    color: rgba(136, 136, 136, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }
}

.evaluate-form-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }

  .picker-item {
    color: rgba(136, 136, 136, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }

  input {
    text-align: right;
  }
}

.checkbox-view {
  display: flex;
  flex-direction: column;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .top {
    display: flex;
    align-items: center;

    .name {
      //   width: 150rpx;
      font-size: #232323;
      font-weight: 28rpx;
      font-weight: bold;
    }

    .value {
      color: rgba(35, 35, 35, 0.8);
      font-size: 28rpx;
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .checkbox-group-view {
    margin-top: 20rpx;
  }
}

.nurse-info {
  .list-item {
    width: 100%;
    box-sizing: border-box;
    background: white;
    display: flex;
    align-items: center;
    margin-top: 10rpx;

    radio {
      transform: scale(0.7);
    }

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .right {
      margin-left: 10rpx;

      .top {
        display: flex;
        color: #232323;
        font-size: 30rpx;
        font-weight: bold;

        .name {
        }

        .phone {
          margin-left: 10rpx;
        }
      }

      .bottom {
        color: #232323;
        font-size: 26rpx;
      }
    }
  }
}
</style>
